<template>
 <div class="main">
    <div class="header" @click="centerDialogVisible=true">
        <div style="width: 100%; height: 100%;">
            <p style="height: 50px; width: 200px; position: relative; font-size: 40px; top: 70%; left: 72%;">美 好 时 刻</p>
            <img src="../../public/mimages/xiaomiwatchs201.png" alt="" width="100%" height="100%">
        </div>  
    </div>
    <div class="center">
        <p class="p2">简约有质感，轻薄而优雅，Xiaomi Watch S2，将前沿科技，</p>
        <p class="p2">精巧融入时尚审美之中，带来更专业运动体验</p>
        <p class="p2">多维健康关怀，和便捷随心的腕上智能体验。</p>
        <p class="p2">不仅如此，全新双尺寸设计，和多种多样的时尚表盘、表带，</p>
        <p class="p2">将为你开启更多时尚可能</p>   
    </div>
    <div class="body">
        <div class="part1">
            <div class="part3">
                <div class="part4">
                    <div class="part4-1">
                        <p class="p1">蓝宝石玻璃镜面*</p>
                        <p class="p1" style="margin-bottom: 20px;">不锈钢金属中框</p>
                        <p class="p2">全新浅金色，</p>
                        <p class="p2" style="margin-bottom: 65px;">演绎时尚魅力</p>
                        <p class="p4">*图中佩戴方式仅为展示美观效果，</p>
                        <p class="p4">非常规佩戴效果</p>
                    </div>
                    <div class="part4-2"></div>
                </div>
                <div class="part5">
                    <div class="card5">
                        <div class="card5-1">
                            <p class="p1">多样表带，适配多样生活</p>
                            <p class="p2">真皮/硅胶/全新撞色钉扣表带</p>
                        </div>
                        <div class="card5-2"></div>
                    </div>
                    <div class="card6">
                        <div class="card6-1">
                            <p class="p1">身体成分测量</p>
                            <p class="p2">体脂率随心测带</p>
                        </div>
                        <div class="card6-2"></div>
                    </div>
                </div>
            </div>
            <div class="card4">
                <div class="card4-1">
                    <p class="p1">百款时尚表盘</p>
                    <p class="p1">时尚灵感不断</p>
                    <p class="p2">精致简约，呈现</p>
                    <p class="p2">经典腕表观感</p>
                </div>
                <div class="card4-2"></div>
            </div>
        </div>
        <div class="part2">
            <div class="card1">
                <div class="card1-1">
                    <p class="p1">专业跑步模式</p>
                    <p class="p2"> 接入 GOMORE 专业算法</p>
                </div>
                <div class="card1-2"></div>
            </div>
            <div class="card2">
                <div class="card2-1">
                    <p class="p1">健康数据共享</p>
                    <p class="p2">实时查看亲友健康数据</p>
                </div>
                <div class="card2-2"></div>
            </div>
            <div class="card3">
                <div class="card3-1">
                    <p class="p1">多维健康管理</p>
                    <p class="p2">手腕上的健康顾问</p>
                </div>
                <div class="card3-2"></div>
            </div>
        </div>
    </div>
    <div class="p3" @click="httpupto(2)"><p>查看更多相关商品<i class="el-icon-arrow-right"></i></p></div>
</div>
</template>

<script>
import axios from 'axios';
export default{
 name: '',
 components: {},
 data(){
    return{
        commodityListvalue:{
            index:0,
            id:0
        },
    }
 },
 methods:{
    httpupto(ins){
        this.commodityListvalue.index = ins
        axios.patch('http://localhost:3001/mishowlistindex/0', this.commodityListvalue).then(()=>{
        this.$router.push('miphone')
                    })
  }
 }
};
</script>

<style scoped lang='less'>
.main{
    height: 1750px;
    width: 100%;
    background: white;
    .header{
    margin-left: 7%;
    width: 85%;
    height:650px;
    }
    .center{
        height: 300px;
        width: 100%;
        text-align: center;
        .p2{
            margin: 22px 0 22px 0;
            font-size: 24px;
            color: rgb(37, 36, 36);
        }
    }
    .body{
        width: 900px;
        height: 900px;
        position: relative;
        margin: auto;
        .p1{
            font-size: 19px;
            color: rgb(7, 5, 5);
            margin-bottom: 8px;
        }
        .p2{
            font-size: 12px;
            margin-bottom: 8px;
            color: rgb(130, 126, 126);
        }
        .p4{
            font-size: 10px;
            margin-bottom: 8px;
            color: rgb(150, 146, 146);
        }
        .part1{
            width: 900px;
            height: 640px;
            .part3{
                width: 670px;
                height: 87%;
                margin: 9.2% 10px 0 0;
                float: left;
                .part4{
                    width: 100%;
                    height: 60%;
                    background-color: rgb(234, 230, 230);
                    margin-bottom: 10px;
                    .part4-1{
                        width: 250px;
                        height: 60%;
                        position: relative;
                        float: left;
                        top: 100px;
                        left:70px;
                    }
                    .part4-2{
                        width:400px;
                        height: 417px;
                        float: left;
                        position: relative;
                        top: -67px;
                        left: 20px;
                       background:url('../../public/mimages/xiaomiwatchs202.png') no-repeat;
                        background-size:contain;
                        background-position: center 0;
                    }
                }
                .part5{
                    width: 100%;
                    height: 38.2%;
                    margin-bottom: 10px;
                    .card5{
                        width: 440px;
                        height: 213px;
                        float: left;
                        background-color: rgb(234, 230, 230);
                        position: relative;
                        top: -73px;
                        .card5-1{
                            width: 400px;
                            height: 10%;
                            position: relative;
                            top: 28px;
                            left: 40px;
                        }
                        .card5-2{
                            width:85%;
                            height: 90%;
                            margin: 15% 0 0 7%;
                            background:url('../../public/mimages/xiaomiwatchs204.png') no-repeat;
                            background-size:contain;
                            background-position: center 0;
                        }
                    }
                    .card6{
                        width: 220px;
                        height: 213px;
                        float: left;
                        position: relative;
                        top: -73px;
                        margin-left: 10px;
                        background-color: rgb(234, 230, 230);
                        .card6-1{
                            width: 400px;
                            height: 10%;
                            position: relative;
                            top: 28px;
                            left: 40px;
                        }
                        .card6-2{
                            width:75%;
                            height: 75%;
                            margin: 32% 0 0 10%;
                            background:url('../../public/mimages/xiaomiwatchs205.png') no-repeat;
                            background-size:contain;
                            background-position: center 0;
                        }

                    }
                }
            }
            .card4{
                width: 220px;
                height: 87%;
                margin-top: 9.2%;
                background-color: rgb(234, 230, 230);
                float: left;
                .card4-1{
                    width: 220px;
                    height: 10%;
                    position: relative;
                    top: 25px;
                    left: 40px;
                }
                .card4-2{
                    width:220px;
                    height: 90%;
                    margin-top: 27%;
                    background:url('../../public/mimages/xiaomiwatchs203.png') no-repeat;
                    background-size:contain;
                    background-position: center 0;
                }
            }
        }
        .part2{
            width: 900px;
            height: 250px;
            margin-top: 10px;
            background-color: rgba(255, 255, 255,0);
            .card1{
                width: 440px;
                height: 100%;
                margin-right: 10px;
                background-color: rgb(234, 230, 230);
                float: left;
                .card1-1{
                    width: 440px;
                    height: 10%;
                    position: relative;
                    top: 25px;
                    left: 30px;
                }
                .card1-2{
                    width: 440px;
                    height: 72%;
                    margin-top: 13%;
                    background:url('../../public/mimages/xiaomiwatchs206.png') no-repeat;
                    background-size:contain;
                    background-position: center 0;
                }
            }
            .card2{
                width: 220px;
                height: 100%;
                background-color: rgb(234, 230, 230);
                margin-right: 10px;
                float: left;
                .card2-1{
                    width: 220px;
                    height: 10%;
                    position: relative;
                    top: 25px;
                    left: 40px;
                }
                .card2-2{
                    width:220px;
                    height: 72%;
                    margin-top: 20%;
                    background:url('../../public/mimages/xiaomiwatchs207.png') no-repeat;
                    background-size:contain;
                    background-position: center 0;
                }
            }
            .card3{
                width: 220px;
                height: 100%;
                background-color: rgb(234, 230, 230);
                float: left;
                .card3-1{
                    width: 220px;
                    height: 10%;
                    position: relative;
                    top: 25px;
                    left: 40px;
                }
                .card3-2{
                    width:220px;
                    height: 60%;
                    margin-top: 26%;
                    background:url('../../public/mimages/xiaomiwatchs208.png') no-repeat;
                    background-size:contain;
                    background-position: center 0;
                }
            }
        }
    }
    .p3{
            font-size: 18px;
            color: rgb(27, 26, 26);
            position: relative;
            top: -60px;
            left: 1350px;
        }
    .p3 :hover{
        color: rgb(146, 139, 131);    
    }
}
</style>